<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      #app {
        width: 375px;
        height: 667px;
        border: 1px solid #000;
        margin: 50px;
        position: relative;
      }

      header {
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      div {
        width: 345px;
        height: 140px;
        margin: 15px;
        border: 1px solid #000;
      }

      footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        border-top: 1px solid #000;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <section :style="{'font-size': size + 'px'}">
        <wb-header @abc="toGig"></wb-header>
        <wb-content></wb-content>
        <wb-footer></wb-footer>
      </section>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      // 按钮组件
      const WbButton = {
        props: ["font"],
        template: `
          <button>{{ font }}</button>
        `,
      };

      const WbHeader = {
        data() {
          return {
            count: 14,
          };
        },
        template: `
          <header>微博首页 <button @click="handleClick(-1)">-</button> <button @click="handleClick(1)">+</button></header>
        `,
        methods: {
          handleClick(n) {
            this.count += n;
            this.$emit("abc", this.count);
          },
        },
      };

      // 子组件
      const WbContentItem = {
        // props: ["title", "content"],
        props: ["item"],
        template: `
          <div>
            <h2>{{ item.title }}</h2>
            <p>{{ item.content }}</p>
            <wb-button font="点赞"></wb-button>
          </div>
        `,
        components: {
          WbButton,
        },
      };

      // 父组件
      const WbContent = {
        data() {
          return {
            list: [
              {
                id: 1,
                title: "共建天蓝地绿水清的美丽家园",
                content:
                  "共建天蓝地绿水清的美丽家园——中国高质量发展亮点透视之五",
              },
              {
                id: 2,
                title: "人间好时节丨当处暑遇上青花瓷",
                content:
                  "青花瓷是我国杰出的传统工艺色彩清新、淡雅花纹勾勒出人间百态",
              },
              {
                id: 3,
                title: "优化营商网络环境的长效举措",
                content:
                  "营商环境是衡量一个国家或地区国际竞争力的重要指标，是推进中国式现代化的重要保障。",
              },
            ],
          };
        },
        template: `
          <main>
            <wb-content-item
              v-for="item in list"
              :key="item.id"
              :item="item"
            ></wb-content-item>
          </main>
        `,
        components: {
          WbContentItem,
        },
      };

      const WbFooter = {
        template: `
          <footer>
            <input type="text" />
            <wb-button font="提交"></wb-button>
          </footer>
        `,
        components: {
          WbButton,
        },
      };

      Vue.createApp({
        data() {
          return {
            size: 14,
          };
        },
        methods: {
          toGig(c) {
            this.size = c;
          },
        },
        components: {
          WbHeader,
          WbContent,
          WbFooter,
        },
      }).mount("#app");
    </script>
  </body>
</html>
